<template>
  <div calss="rightContainer" style="height:100%;">
    <div class="rightContainer_center">
      <!-- 左侧 -->
      <div style="flex:6">
        <div>
          <span class="iconClass" />
          <span class="titleClass">
            收支总数(万元)
          </span>
        </div>
        <div class="rightContainer_content" style="margin-top:0;height:34%;display: flex;justify-content: space-between;align-items: center;">
          <div v-for="(item,index) in list" :key="index" class="numberClass">
            <dv-border-box-12>
              <div class="rightContainer_Top">
                <div class="name">
                  {{ item.name }}
                </div>
                <div class="number">
                  <div class="shouprop">
                    <div class="label">收入</div>
                    <div class="value">{{ item.shouru }}</div>
                  </div>
                  <div class="shouprop">
                    <div class="label">支出</div>
                    <div class="value">{{ item.zhichu }}</div>
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
        <div>
          <span class="iconClass" />
          <span class="titleClass">
            全区乡镇基本情况
          </span>
        </div>
        <div class="rightContainer_content" style="margin-top: 12px;height: calc(64% - 54px);">
          <dv-border-box-12>
            <div class="chartClass grid-3">
              <VEcharts
                ref="config"
                autoresize
                :options="config"
                style="width:100%;height:100%"
              />
              <VEcharts
                ref="config"
                autoresize
                :options="configcqc1"
                style="width:100%;height:100%"
              />
              <VEcharts
                ref="config"
                autoresize
                :options="configcqc2"
                style="width:100%;height:100%"
              />
            </div>
          </dv-border-box-12>
        </div>

      </div>
      <!-- 右侧 -->
      <div style="flex:6;margin-left: 20px;">
        <div>
          <span class="iconClass" />
          <span class="titleClass">
            两直资金
          </span>
          <span class="fenxiClass">
            两直分析
          </span>
        </div>
        <div class="rightContainer_content" style="margin-top:0;height:34%;display: flex;justify-content: space-between;align-items: center;">
          <div v-for="(item,index) in listZC" :key="index" class="numberClass">
            <dv-border-box-12>
              <div class="rightContainer_Top">
                <div class="name">
                  {{ item.name }}
                </div>
                <div v-if="item.type === 'pie'" class="rightContainer_pie">
                  <a-progress
                    type="circle"
                    :percent="item.num"
                    :width="60"
                    :stroke-width="10"
                    :stroke-color="{
                      '0%': '#5DFFFF'
                    }"
                  >
                    <template #format="value">
                      <span style="color: #e9d500;fontSize:12px">{{ value }}%</span>
                    </template>
                  </a-progress>
                </div>
                <div v-else class="number-large">
                  {{ item.num }}
                </div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
        <div>
          <span class="iconClass" />
          <span class="titleClass">
            乡镇资金宽裕度
          </span>
        </div>
        <div class="rightContainer_content" style="height: calc(64% - 54px);">
          <dv-border-box-12>
            <div class="chartClass">
              <!-- :options="config1" -->
              <VEcharts
                ref="config1"
                :options="optConfigZiJin()"
                autoresize
                style="width:100%;height:100%"
              />

            </div>
          </dv-border-box-12>
        </div>

      </div>
    </div>

    <div class="rightContainer_bottom">
      <div>
        <span class="iconClass" />
        <span class="titleClass">
          月度对比
        </span>
      </div>
      <div style="margin-top:5px;height: calc(100% - 26px);">
        <dv-border-box-12>
          <div style="height:100%;padding:10px">
            <VEcharts
              ref="config2"
              autoresize
              :options="config2"
              style="width:100%;height:100%"
            />
          </div>
        </dv-border-box-12>
      </div>
    </div>

  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import { commonMethod } from '@/api/mapper/index.js';
import { getToken } from '@/utils/auth.js';
import _ from 'lodash';

var colors = ['#5470C6', '#91CC75', '#EE6666', '#D5A619'];

function optConfigZiJin() {
  return {
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      axisLabel: {
        interval: 0,
        rotate: 40,
        color: '#6B6E77'
      },
      type: 'category',
      data: [
        '马鞍',
        '齐贤',
        '安昌',
        '钱清',
        '扬汛桥',
        '夏履',
        '漓渚',
        '夏履',
        '福全',
        '兰亭',
        '平水',
        '王坛',
        '稽东'
      ],
      axisLine: {
        lineStyle: {
          color: 'rgba(0,0,0,0.45)'
        }
      },
      textStyle: {
        fontSize: '12'
      }
    },
    grid: {
      top: '20',
      left: '3%',
      right: '5%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      type: 'value'

    },
    series: [
      {
        data: [
          0.5,
          0.42,
          0.62,
          0.45,
          0.89,
          0.65,
          0.23,
          0.34,
          0.59,
          0.37,
          0.69,
          0.81,
          1
        ],
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'rgba(91,143,249,0.85)'
          }
        }
      }
    ]
  };
}
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      config2: {},
      config1: {},
      configcqc1: {},
      configcqc2: {},
      config: {
      },
      list: [],
      optConfigZiJin,
      // 两直资金
      dataLZ: [],
      year: getToken('chooseYear')
    };
  },

  computed: {
    // 两直资金
    listZC() {
      // return this.data
      const counter = this.dataLZ.reduce((p, c) => {
        p.zf += c.LJBFJE * 1;
        p.bf += c.XDJE * 1;
        return p;
      }, {
        zf: 0,
        bf: 0
      });

      // const bf = counter.bf.toFixed(2);
      // const zf = counter.zf.toFixed(2);

      return [
        {
          name: '下达总金额',
          // num: bf,
          num: 42716.14
        },
        {
          name: '累计拨付总金额',
          // num: zf,
          num: '40428.90'

        },
        {
          name: '累计支付总进度',
          // num: ~~((zf / bf) * 100),
          num: 85.63,

          type: 'pie'
        }
      ];
    }
  },
  async mounted() {
    Promise.allSettled(
      [
        this.getTop(),
        this.getListZC()
      ]
    ).then(values => {
      const [{ value: data1 }, { value: data2 }] = values;
      if (data1 && data2) {
        this.list = [
          {
            name: '一般公共预算',
            shouru: data1.YBGGYS,
            zhichu: data2.YBGGYS
          },
          {
            name: '政府性基金',
            shouru: data1.ZFXJJ,
            zhichu: data2.ZFXJJ
          },
          {
            name: '国有资本经营',
            shouru: data1.GYZBJY,
            zhichu: data2.GYZBJY
          }, {
            name: '社保基金',
            shouru: data1.SBJJ,
            zhichu: data2.SBJJ
          }
        ];
      }
    });
    // await this.getTop();
    // await this.getListZC();
    this.getLZ();
    this.getConfig();
    await this.getConfig1();
    await this.getConfig2();
    // setInterval(() => {
    //   this.getConfig();
    // }, 15000);
    // setInterval(() => {
    //   this.getConfig1();
    // }, 20000);
    // setInterval(() => {
    //   this.getConfig2();
    // }, 25000);
  },
  methods: {
    getTop() {
      return commonMethod({
        filterList: [{
          col: 'year', value: this.year
        }],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 566
      }).then(res => {
        const { success, data } = res;
        if (success && data.length) {
          const value = data[0];
          return Promise.resolve(value);
        }
      });
    },

    // 两直资金
    getLZ() {
      commonMethod({
        tableId: 1013
      }).then(res => {
        const { data } = res;
        if (data) {
          this.dataLZ = data;
        }
      });
    },
    getListZC() {
      return commonMethod({
        filterList: [{
          col: 'year', value: this.year
        }],
        pageIndex: 0,
        pageSize: 1,
        pageType: 1,
        tableId: 567
      }).then(res => {
        const { success, data } = res;
        if (success && data.length) {
          const value = data[0];
          // this.listZC = [{
          //   name: '一般公共预算',
          //   num: value.YBGGYS
          // },
          // {
          //   name: '政府性基金',
          //   num: value.ZFXJJ
          // },
          // {
          //   name: '国有资本经营',
          //   num: value.GYZBJY
          // }, {
          //   name: '社保基金',
          //   num: value.SBJJ
          // }];
          return Promise.resolve(value);
        }
      });
    },
    async getConfig() {
      this.$refs.config.clear();
      this.config = {};
      this.configcqc1 = {};
      this.configcqc2 = {};
      /*
      const dataList = [];
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 568
      }).then(res => {
        if (res.success) {
          res.data.map((item, index) => {
            dataList.push({
              // value: item.LJ, name: item.ZCKM.substr(0, 4)
              value: item.LJ, name: item.ZCKM.replace('支出', '')
            });
          });
        }
      });

      this.config = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            borderRadius: 5
          },
          textStyle: {
            fontSize: 12, // 字体大小
            color: '#ffffff'// 字体颜色
          }
        },
        series: [
          {
            name: '公共预算支出',
            type: 'pie',
            radius: '70%',
            data: dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  // 自定义颜色
                  var colorList = [
                    '#FF9D4D', '#5AD8A6', '#5D7092', '#F6BD16', '#6DC8EC', '#5B8FF9', '#5B8FF9', '#9270CA'
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }

          }
        ]
      };
       */
      const y = '30%';
      const config = {
        color: ['#4F82E6', '#55F3FF'],
        backgroundColor: '#031d33',
        tooltip: {
          show: true,
          formatter: '{b}: {c}<br />占比: {d}%'
        },
        legend: {
          left: '25%',
          bottom: '0',
          // orient: 'vertical',
          icon: 'circle',
          zlevel: 9,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '乡财',
            type: 'pie',
            radius: ['35%', '55%'],
            center: ['50%', y],
            hoverAnimation: true,
            z: 10,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: '#003359'
              }
            },
            label: {
              show: false,
              position: 'center',
              formatter: (params) => {
                return `乡财信息`;
              }
            },
            data: [
              {
                value: 4,
                name: '乡财县管'
              },
              {
                value: 12,
                name: '乡财乡管'
              }

            ],
            labelLine: {
              show: false
            }
          }
          /* {
            name: '乡财',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['50%', y],
            hoverAnimation: true,
            z: 10,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: '#003359'
              }
            },
            label: {
              show: true,
              position: 'center',
              formatter: (params) => {
                return `任务信息`;
              }
            },
            data: [
              {
                value: 64,
                name: '任务数量'
              },
              {
                value: 12,
                name: '风险信息'
              }

            ],
            labelLine: {
              show: false
            }
          },
          {
            name: '财政',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['85%', y],
            hoverAnimation: true,
            z: 10,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: '#003359'
              }
            },
            label: {
              show: true,
              position: 'center',
              formatter: (params) => {
                return `人员信息`;
              },
              textStyle: {
                color: '#fff'
              }
            },
            data: [
              {
                value: 16,
                name: '财政办公室'
              },
              {
                value: 61,
                name: '财政办公人员'
              }

            ],
            labelLine: {
              show: false
            }
          } */
        ]
      };

      const config1 = _.cloneDeep(config);
      const config2 = _.cloneDeep(config);
      const config3 = _.cloneDeep(config);

      config2.series[0].data = [
        {
          value: 64,
          name: '任务数量'
        },
        {
          value: 12,
          name: '风险信息'
        }

      ];
      config2.color = ['#9FE080', '#EE6666'];
      config3.series[0].data = [
        {
          value: 16,
          name: '财政办公室'
        },
        {
          value: 61,
          name: '财政办公人员'
        }

      ];
      this.config = config1;
      this.configcqc1 = config2;
      this.configcqc2 = config3;
    },
    async getConfig1() {
      this.$refs.config1.clear();
      this.config1 = {};
      let [xData, yData] = [[], []];
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 569
      }).then(res => {
        if (res.success) {
          xData = res.data.map(item => {
            return item.YSKM.split('、').slice(1).toString();
          });

          yData = res.data.map(item => item.LJZC);
        }
      });
      this.config1 = {
        grid: {
          left: '3%',
          top: '8%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        axisLabel: {
          formatter: function(value) {
            let ret = '';
            const maxLength = 4; // 每项显示文字个数
            const valLength = value.length;
            const rowN = Math.ceil(valLength / maxLength);
            if (rowN > 1) {
              let flag = true;
              for (let i = 0; i < rowN; i++) {
                let temp = '';
                const start = i * maxLength;
                const end = start + maxLength;
                temp = value.substring(start, end);
                if (i === 0) {
                  temp += '\n';
                }

                if (i < 2) {
                  ret += temp; // 凭借最终的字符串
                } else {
                  if (flag) {
                    flag = false;
                    ret += '...';
                  }
                }
              }
              return ret;
            } else {
              return value;
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        tooltip: {// 鼠标滑上去显示效果
          trigger: 'item'
        },
        series: [{
          data: yData,
          barWidth: '50%',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#E9D500'
            }
          }
        }]
      };
    },
    async getConfig2() {
      this.$refs.config2.clear();
      this.config2 = {};
      const monthList = [];
      for (let i = 0; i < 12;) {
        monthList.push(++i + '月');
      }
      const ggsysr = [];
      const jjyssr = [];
      const ggsyzc = [];
      const jjyszc = [];
      ggsysr.length = jjyssr.length = ggsyzc.length = jjyszc.length = 12;
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 570
      }).then(res => {
        if (res.success) {
          // ! 6、7月份数据写死
          res.data.push(
            {
              GGYSSRLJ: 300173,
              GGYSZCLJ: 0,
              JJYSSRLJ: 69687,
              JJZCLJ: 92252,
              YEAR: '2021',
              YF: '6'
            },
            {
              GGYSSRLJ: 300173,
              GGYSZCLJ: 0,
              JJYSSRLJ: 69687,
              JJZCLJ: 92252,
              YEAR: '2021',
              YF: '7'
            },
          );

          res.data.map(o => {
            const index = Number(o.YF) - 1;
            ggsysr[index] = Number(o.GGYSSRLJ);
            jjyssr[index] = Number(o.JJYSSRLJ);
            ggsyzc[index] = Number(o.GGYSZCLJ);
            jjyszc[index] = Number(o.JJZCLJ);
            // monthList.push(o.YF + '月');
            // ggsysr.push(Number(o.GGYSSRLJ));
            // jjyssr.push(Number(o.JJYSSRLJ));
            // ggsyzc.push(Number(o.GGYSZCLJ));
            // jjyszc.push(Number(o.JJZCLJ));
          });
        }
      });
      this.config2 = {
        color: colors,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {// 鼠标滑上去显示效果
          trigger: 'item'
        },
        legend: {
          data: ['公共预算收入', '基金预算收入', '公共预算支出', '基金预算支出'],
          textStyle: {
            fontSize: 12, // 字体大小
            color: '#ffffff'// 字体颜色
          }
        },
        xAxis: [
          {
            type: 'category',

            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },

            data: monthList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }

          }

        ],
        series: [
          {
            name: '公共预算收入',
            type: 'bar',
            data: ggsysr
          },
          {
            name: '基金预算收入',
            type: 'bar',
            data: jjyssr
          },
          {
            name: '公共预算支出',
            type: 'bar',
            data: ggsyzc
          },
          {
            name: '基金预算支出',
            type: 'bar',
            data: jjyszc
          }

        ]
      };
    }

  }
};
</script>

<style lang="scss" scoped>
  .rightContainer_center{
    display: flex;
    height: 55%;
  }
  .iconClass{
    width: 5px;
    height: 18px;
    vertical-align: middle;
    opacity: 1;
    background: #2597ff;
    border-radius: 1px;
    display: inline-block
  }
  .titleClass{
    width: 80%;
    vertical-align: middle;
    display: inline-block;
    background: url('../../../assets/images/mapTest1/titleBg.png');
    background-size:100% 100%;
    margin-left: 5px;
    color: #fff;
    height: 18px;
    opacity: 1;
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 18px;
    padding-left: 5px;
  }
  .rightContainer_content{
    margin-top: 8px;
    display: flex;
  }
  .numberClass{
    flex:1;
    margin-left:5px;
    // height:145px;
    height: 82%;

    // padding:10px
  }
  .rightContainer_pie {
    width: 100%;
    padding: 0 24px;
    margin-top: 3px;
    text-align: center;
  }
  .number-large {
    font-size: 16px;
    color: #e9d500;
    line-height: 50px;
  }
  .number{
    height: 38px;
    opacity: 1;
    font-size: 13px;
    font-family: DINCondensed, DINCondensed-Bold;
    font-weight: 700;
    text-align: center;
    color: #e9d500;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 24px;
    padding-right: 12px;

    .shouprop {
      display: flex;
      .label {
        margin-right: 5px;
      }
    }
  }
  .name{
    height: 22px;
    opacity: 1;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #4ca7ed;
    line-height: 22px;
  }
  .chartClass{
    height: 100%;
    padding:10px;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .rightContainer_bottom{
    margin-top: 5px;
    height: calc(45% - 5px);
  }
  .fenxiClass{
    width: 64px;
    opacity: 1;
    font-size: 10px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #1fd2ff;
    border: 1px solid #1fd2ff;
    border-radius: 3px;
    display: inline-block;
    padding: 3px;
    text-align: center;
  }
  .fenxiClass:hover{
    cursor: pointer;
    text-decoration: underline
  }

.rightContainer_Top{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
